<template>
    <div class="tray">
        <div class="title">请选择入库托盘编号</div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了"
                  @load="onLoadTray">
            <div class="TrayList">
                <!--循环体-->
                <div class="TrayList_cycle" @click="eventClickSure(item.id,item.title)" v-for="item in TrayList" :key=item>
                    <!--通知上部-->
                    <div class="TrayList_cycle_top">
                        <span>{{item.title}}</span>
                    </div>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script>
    import {List,Dialog} from 'vant';

    export default {
        name: "tray",
        components:{
            [List.name]:List
        },
        data() {
            return {
                page: 0,
                list_rows: 10,
                loading:false,
                finished:false,
                TrayList:[],
            }
        },
        methods: {
            onLoadTray() {
                var that = this;
                var url = '/api/home/tray/getlist';
                var param = {
                    page:this.page,
                    list_rows: this.list_rows
                };
                this.$util.postRequestInterface(url,param,(res)=>{
                    that.page = that.page + 1;
                    if (res.data == ''){
                        that.loading = false;
                        that.finished = true;
                    }else {
                        for (let i of res.data.data) {
                            that.TrayList.push({
                                id:i.id,
                                title: i.number,
                                info: i.info,
                                time: that.$moment(i.create_time * 1000).format('YYYY-MM-DD HH:mm:ss'),
                                isread:i.isread
                            });
                        }
                    }
                    // // 加载状态结束
                    that.loading = false;
                    // // 数据全部加载完成
                    if (that.TrayList.length >= res.data.count) {
                        that.finished = true;
                    }
                })
            },
            eventClickSure(id,num){
                Dialog.confirm({
                    title:'操作提示',
                    message:'确定要将垃圾入库到托盘'+num+'吗？'
                }).then(()=>{
                    var url = '/api/home/order/change';
                    var param = {
                        type:'ruku',
                        id:this.$route.query.id,
                        trayid:id,
                        token:this.$store.state.options.user.token
                    };
                    this.$util.postRequestInterface(url,param,(res)=>{
                        this.$router.go(-2)
                    })
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .tray{
        .title{
            width: 100%;
            background:#EFEEED;
            padding: 1rem 1.3rem;
            color: #999999;
            font-size: 1.3rem;
        }
            .TrayList {
                width: 100%;
                .TrayList_cycle {
                    width: 90%;
                    margin: 0 auto;
                    padding: .4rem 0;
                    .TrayList_cycle_top {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        padding: 1rem 0;
                        border-bottom: 1px solid #EEEEEE;
                        span {
                            &:nth-child(1) {
                                /*display: inline-block;*/
                                /*width: .5rem;*/
                                /*height: .5rem;*/
                                /*border-radius: 50%;*/
                                /*background-color: red;*/
                                /*margin-right: .5rem;*/
                            }
                        }
                    }
                }
            }
    }
</style>